<template>
  <div class="place">
    <div class="wrapper">
      <!-- 头部 star  -->
      <div class="header">
        <router-link
          tag="div"
          to="/home"
          class="header_left iconfont icon-guanbi"
        ></router-link>
        <div class="header_center">选择城市</div>
        <div class="header_right"></div>
      </div>
      <!-- 头部 end   -->

      <!-- 搜索star -->
      <!-- <div class="inp">
            <input type="text">
        </div> -->
      <!-- 搜索end  -->

      <div class="type">
        <van-index-bar>
          <van-index-anchor index="A" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in A" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>

          <van-index-anchor index="B" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in B" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
          
          <van-index-anchor index="C" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in C" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
          <van-index-anchor index="D" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in D" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
          <van-index-anchor index="E" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in E" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
          <van-index-anchor index="F" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in F" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
          <van-index-anchor index="G" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in G" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
          <van-index-anchor index="H" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in H" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
          
          <van-index-anchor index="J" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in J" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
          <van-index-anchor index="K" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in K" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
          <van-index-anchor index="L" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in L" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
          <van-index-anchor index="M" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in M" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
          <van-index-anchor index="N" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in N" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
          
          <van-index-anchor index="P" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in P" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
          <van-index-anchor index="Q" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in Q" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
          <van-index-anchor index="R" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in R" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
          <van-index-anchor index="S" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in S" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
          <van-index-anchor index="T" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in T" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
        
          <van-index-anchor index="W" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in W" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
          <van-index-anchor index="X" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in X" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
          <van-index-anchor index="Y" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in Y" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>
          <van-index-anchor index="Z" />
          <div @click="city(item.cityNameAbbr,item.cityId,item.cityCode)" v-for="item in Z" :key="item.cityId">
            <van-cell :title="item.cityNameAbbr" />
          </div>

        </van-index-bar>
      </div>
    </div>
  </div>
</template>

<script>
import { getJsonPlaceData } from "../api/place.js";
export default {
  data() {
    return {
      // positionCity:null,
      A: null,
      B: null,
      C: null,
      D: null,
      E: null,
      F: null,
      G: null,
      H: null,
  
      J: null,
      K: null,
      L: null,
      M: null,
      N: null,
     
      P: null,
      Q: null,
      R: null,
      S: null,
      T: null,

      W: null,
      X: null,
      Y: null,
      Z: null,
    };
  },
  methods: {
    city(cityNameAbbr,cityId,cityCode){
        this.$emit("city",{cityNameAbbr,cityId,cityCode})
    },
  },
  created() {
    getJsonPlaceData().then((data) => {
    //   console.log(data);
      //   this.positionCity = data.data.positionCity;
      this.A = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "A";
      });
      this.B = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "B";
      });
      this.C = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "C";
      });
      this.D = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "D";
      });
      this.E = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "E";
      });
      this.F = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "F";
      });
      this.G = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "G";
      });
      this.H = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "H";
      });
    
      this.J = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "J";
      });
      this.K = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "K";
      });
      this.L = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "L";
      });
      this.M = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "M";
      });
      this.N = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "N";
      });
    
      this.P = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "P";
      });
      this.Q = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "Q";
      });
      this.R = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "R";
      });
      this.S = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "S";
      });
      this.T = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "T";
      });
   
      this.W = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "W";
      });
      this.X = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "X";
      });
      this.Y = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "Y";
      });
      this.Z = data.data.positionCity.filter((item) => {
        return item.pinYinName.slice(0, 1) == "Z";
      });
    //   console.log(data.data.positionCity);
    //   console.log(bun);
    });
  },
};
</script>

<style lang="scss" scoped>
.place {
    background-color: #f0eee2;
  .wrapper {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    position: relative;

    .header {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      padding: 0 16px;
      position: sticky;
      left: 0;
      top: 0;
      z-index: 1;

      .header_left {
        color: #fc9632;
        font-size: 18px;
      }
      .header_center {
        font-size: 14px;
        font-weight: 500;
        color: #84766c;
      }
      .header_right {
        width: 18px;
      }
    }
    // .van-index-bar ::v-deep .van-index-anchor{
    //     // color: #84766c;
    // }
    .van-index-bar ::v-deep .van-index-anchor--sticky{
        top: 50px;
    }
    .van-index-bar__index{
        padding: 2px 8px 3px 16px;
    }
  }
}
</style>